<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			let province = $("#province")
			let city = $("#city")
			let area = $("#area")
			
			citys.forEach(item=>{
				let option = $(`<option>${item.provinceName}</option>`);
				province.append(option)
			})
			
			citys[0].mallCityList.forEach(item=>{
				let option = $(`<option>${item.cityName}</option>`);
				city.append(option)
			})
			
			citys[0].mallCityList[0].mallAreaList.forEach(item=>{
				let option = $(`<option>${item.areaName}</option>`);
				area.append(option)
			})
			
			province.change(function(){
				updataCity.call(this);
				updataArea.call(city[0]);
			})
			city.change(function(){
				updataArea.call(this)
			})
			
			function updataCity(){
				city.html("")
				// 返回当前选中的选择项在其select标签中的下标
				cityList = citys[this.selectedIndex].mallCityList;
				cityList.forEach(item=>{
					let option = $(`<option>${item.cityName}</option>`);
					city.append(option)
				})
			}
			function updataArea(){
				area.html("")
				let areaList = cityList[this.selectedIndex].mallAreaList;
				areaList.forEach(item=>{
					let option = $(`<option>${item.areaName}</option>`);
					area.append(option)
				})			
			}
		</script>
	</body>
</html>
